
/**sg */
import React from 'react'
import { Text, View, Image } from '@tarojs/components'
import { ViewProps } from '@tarojs/components/types/View'

type Props = {
    src?: string,
    iconStyle?: React.CSSProperties,
    title: string,
    titleStyle?: React.CSSProperties,
    content?: string | React.ReactNode,
    contentStyle?: React.CSSProperties,
    placeholder?: string,
    showUnderline?: boolean,
    underlineStyle?: React.CSSProperties,
    showNav?: boolean,
    onTitleClick?: () => void,
}



export default (props: Props & ViewProps) => {
    const { style, showNav = true, ...rest } = props
    return (
        <View style={{ ...styles.container, ...style as React.CSSProperties }}>
            <View onClick={rest.onClick} style={{ ...styles.innerContainer }}>
                <View style={{ display: 'flex', flexDirection: 'row', flexGrow: 0, flexShrink: 1, alignItems: 'center', marginRight: '20px', backgroundColor: 'transparent' }}
                    onClick={() => props.onTitleClick && props.onTitleClick()}
                >
                    {
                        rest.src &&
                        <Image src={rest.src} style={{ display: 'flex', flexShrink: 0, width: '24px', height: '24px', marginRight: '10px', ...props.iconStyle }} mode='aspectFit' />
                    }

                    <Text className='oneLine' style={{ color: '#666666', flexGrow: 0, flexShrink: 1, fontSize: '14px', ...props.titleStyle }}>{rest.title}</Text>
                </View>

                <View style={{ display: 'flex', flexGrow: 0, flexShrink: 1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'transparent' }}>
                    {
                        React.isValidElement(rest.content) ?
                            rest.content
                            :
                            <Text className={`oneLine line2`} style={{ flexGrow: 0, flexShrink: 0, fontSize: '14px', color: (rest.placeholder && !rest.content) ? 'lightgray' : '#333333', ...props.contentStyle }}> {rest.content ? rest.content : rest.placeholder}</Text>
                    }
                    {
                        rest.onClick && showNav &&
                        <Image style={{ display: 'flex', flexShrink: 0, width: '9px', height: '16px', marginLeft: '10px' }} src={require('./more_grey.png')} mode={'aspectFit'} />
                    }
                </View>
            </View>

            {/* 下划线。 */}
            {
                rest.showUnderline &&
                <View style={{ ...styles.underline, ...rest.underlineStyle }} />
            }
        </View>

    )
}



const styles: { [key: string]: React.CSSProperties } = {
    container: {
        display: 'flex',
        width: 'calc(100%)',
        minHeight: '44px',
        backgroundColor: 'white',
        flexDirection: 'column',
        justifyContent: 'center',
    },
    innerContainer: {
        display: 'flex',
        flexGrow: 1,
        height: 'calc(100% - 1px)',
        margin: '0 15px',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    underline: {
        backgroundColor: '#f5f5f5',
        marginLeft: '15px',
        width: 'calc(100% - 15px)',
        height: '1px',
    }
}

